<!-- 柱状图 -->
<template>
  <div class="chartcontainer">
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <ve-histogram
      :data="chartData"
      width="100%"
      height="100%"
      :settings="chartSettings"
      :judge-width="true"
      ref="mychart"
      :after-config="afterConfig"
      :theme="theme"
    ></ve-histogram>
  </div>
</template>

<script>
import VeHistogram from "v-charts/lib/histogram.common";
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";

export default {
  props: {
    diyposition: [Object],
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    colors :[Object],
    timer: [Number, String],
    theme: [Object],
    title:[String],
    searchid: [Number, String],
    chartid: [Number, String],
    field:[String],
    drill:[String],
    isShowLegend: {
      type: Boolean,
      default: true
    }
  },
  data() {
    this.chartSettings = {
      yAxisName: [`${this.chartData.columns[1]}`],
      label: {
        normal: {
          show: true,
          formatter: params => {
            return `${params.value}`;
          }
        }
      },
      stack: this.chartData.stack ? this.chartData.stack : "",
      showLine: this.chartData.showLine ? this.chartData.showLine : ""
    };
    this.chartEvents = {
      click: function(e) {
        var that = this;
      }
    };
    return {
      intervaltime: this.timer,
      mymarkline: []
    };
  },

  components: { VeHistogram },
  computed: {},
  mounted() {
    if (this.chartData.average) {
      var total = 0;
      var cdata = this.chartData;
      cdata.average.map((item, index) => {
        cdata.rows.map(rowitem => {
          total += rowitem[item];
        });
      });
      this.mymarkline.push({
        name: "111",
        yAxis: total / this.chartData.rows.length
      });
    }

    if (this.chartData.ifpercent) {
      this.chartData.rows.map((item, index) => {
        total = 0;
        this.chartData.columns.map((colitem, colindex) => {
          if (colindex != 0) {
            total += item[colitem];
          }
        });
        item.total = total;
      });
      var that = this;
      this.chartSettings.label.normal.formatter = function(value, index) {
        var componentIndex = value.componentIndex;
        var totalcount = that.chartData.rows[componentIndex].total;
        return (
          ((value.data / totalcount).toFixed(4) * 100).toString().slice(0, 5) +
          "%"
        );
      };
    }

    const eChart = this.$refs.mychart.echarts;
    eChart.on("click", data => {
      this.$emit("addthirdchartdata", data, this.field);
      if (this.drill != "notexist") {
        this.$emit("setdrill", data.name, this.drill, this.chartData.drill);
      }
    });
  },
  destroyed() {},
  methods: {
    afterConfig(options) {
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        };
      }
      options.grid = {
        left: 40,
        right: this.chartData.average ? 40 : 20,
        bottom: 60
      };
      options.series[10] = {
        type: "bar",
        barCategoryGap: "10%",
        markLine: {
          data: this.mymarkline
        }
      };
      options.xAxis[0].axisLabel = {
        interval: 0,
        rotate: 45,
        formatter: function(value, index) {
          if (value.length > 6) {
            value = value.substr(0, 6) + "...";
          }
          return value;
        }
      };
      var that = this;

      options.tooltip = {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        },
        //数据格式
        formatter: function(params) {
          let dataFunction = function(params) {
            var componentIndex = params.componentIndex;
            var totalcount = that.chartData.rows[componentIndex].total;
            return (
              ((params.value / totalcount).toFixed(4) * 100)
                .toString()
                .slice(0, 5) + "%"
            );
          };
          String.prototype.splice = function(start, newStr) {
            return this.slice(0, start) + newStr + this.slice(start);
          };
          // params[1].marker表示的是前面的小圆点
          // params[1].seriesName表示的是柱子的名字
          // params[1].value表示的是柱子的值
          var str = "";

          params.map((item, index) => {
            str = that.chartData.ifpercent
              ? str.splice(
                  0,
                  item.marker +
                    item.seriesName +
                    " : " +
                    item.value +
                    " (" +
                    dataFunction(item) +
                    ") " +
                    "<br/>"
                )
              : str.splice(
                  0,
                  item.marker + item.seriesName + " : " + item.value
                );
          });
          str = str.splice(0, params[0].name + "<br/>");
          return str;
        }
      };

      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    chartData(oldvalue, newvalue) {
      this.setrefresh = false;
      this.chartSettings = {
        yAxisName: [`${this.chartData.columns[1]}`],
        label: {
          normal: {
            show: true,
            formatter: params => {
              return `${params.value}`;
            }
          }
        },
        stack: this.chartData.stack ? this.chartData.stack : "",
        showLine: this.chartData.showLine ? this.chartData.showLine : ""
      };
      this.setrefresh = true;
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>